<script setup>
import { ref } from 'vue';
import{useScroll} from "@vueuse/core";
import Dialog from "@/components/Dialog/Dialog.vue";
const menuList = [
  {
    name: "首页",
    icon: "home",
    path: "/"
  },
  {
    name: "社团",
    icon: "article",
    children: [
      {
        name: "社团",
        icon: "archives",
        path: "/clubs"
      },
      {
        name: "时间线",
        icon: "category",
        path: "/clubs/timeline"
      },
    ]
  },
  {
    name: "活动",
    icon: "fun",
    path: "/events"
  },
  {
    name: "留言板",
    icon: "message",
    path: "/message"
  },
  {
    name: "关于",
    icon: "plane",
    path: "/about"
  },
];
const logout = () => {
  if (route.path == "/user") {
    router.go(-1);
  }

};
const isLogin = ref(true); // user.isLogin;
const dialogVisible = ref(false);
const handlerLogin = () => {
  dialogVisible.value = true;
};
const { x, y, isScrolling, arrivedState, directions } = useScroll(window)
</script>

<template>
  <div class="menu">
    <div class="menu-item title">
      <router-link to="/" class="menu-btn">
        CLUBS
      </router-link>
    </div>
    <template v-for="menu of menuList" :key="menu.name">
      <!--      <div v-if="!menu.children" class="menu-item" :class="{ active: route.meta.title === menu.name }">-->
      <div v-if="!menu.children" class="menu-item">
        <router-link :to="menu.path" class="menu-btn">
          <!--          <svg-icon :icon-class="menu.icon"></svg-icon> -->
          {{ menu.name }}
        </router-link>
      </div>
      <div v-else class="menu-item dropdown">
        <a class="menu-btn drop">
          <!--          <svg-icon :icon-class="menu.icon"></svg-icon> -->
          {{ menu.name }} </a>
        <ul class="submenu">
          <li class="subitem" v-for="submenu of menu.children" :key="submenu.name"
          >
            <router-link class="link" :to="submenu.path">
              <!--              <svg-icon :icon-class="submenu.icon">-->

              <!--              </svg-icon>-->
              {{ submenu.name }}
            </router-link>
          </li>
        </ul>
      </div>
    </template>
      <div class="menu-item" v-show="y <=70">
        <template v-if="isLogin">
          <p>个人中心</p>
          <ul class="submenu">
            <li class="subitem">
              <router-link to="/user" class="link">
                个人中心
              </router-link>
            </li>
            <li class="subitem">
              <a class="link">
                退出登录 </a>
            </li>
          </ul>
        </template>
        <template v-else>
          <div class="menu-item" @click="handlerLogin">
            登录
          </div>
        </template>
      </div>
  </div>
  <Dialog v-model="dialogVisible"></Dialog>
</template>

<style scoped lang="scss">

$sub-menu-width: 120px;
$primary-color: #111;
$hovered-color: #c84747;
@use"@/styles/color-var-prim" as prim;

.user-avatar {
  display: inline-block;
  position: relative;
  top: 0.3rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
}

.menu {
  display: flex;
  align-items: center;
  height: 100%;

}

.menu-item {
  position: relative;
  padding: 0 0.625rem;
  letter-spacing: 0.0625rem;
  font-size: 17px;
  text-align: center;

  &:not(.title) .menu-btn::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0.1875rem;
    bottom: 0;
    border-radius: 0.125rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: currentColor;
    transition: all 0.4s ease-in-out 0s;
  }

  &:hover .submenu {
    display: block;
  }
}

.menu-item.active:not(.dropdown) .menu-btn::before,
.menu-item:not(.dropdown):hover .menu-btn::before {
  width: 70%;
}

.submenu {
  display: none;
  position: absolute;
  background-color: prim.$color-label-bg-active;
  left: 7px;
  min-width: $sub-menu-width;
  margin-top: 1rem;
  padding: 0;
  border-radius: 0.5rem 0;
  animation: slideUpIn 0.3s;
  &::before {
    position: absolute;
    top: -1.25rem;
    left: 0;
    width: 100%;
    height: 2.5rem;
    content: "";
  }
}

.subitem {
  color: prim.$color-text-light;
  display: block;
  margin: 0.3rem 0.3rem;
  font-size: 1.3rem;
  width: 100%;
  height: 100%;
  position: relative;
  &:first-child {
    border-radius: 0.625rem 0 0 0;
  }

  &:last-child {
    border-radius: 0 0 0.625rem 0;
  }

  &:after{
    position: absolute;
    content: "";
    width: 0;
    left: 0;
    bottom: 0;
    background: $hovered-color;
    height: 2px;
    transition: 0.3s ease-out;

  }
  &:hover::after {
    width: 100%;
  }
  .link {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    width: 100%;
    text-shadow: none;
  }
}

.sub.menu .submenu {
}

.drop::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  border: 0.3rem solid transparent;
  border-top-color: currentColor;
  border-bottom: 0;
}

@media (max-width: 865px) {
  .menu {
    justify-content: center;
  }

  .menu .menu-item {
    display: none;
  }

  .menu .title {
    display: block;
  }
}
/* 定义动画关键帧 */
@keyframes slideUpIn {
  from {
    transform: translateY(100%); /* 初始位置在元素下方100%的位置 */
    opacity: 0; /* 初始透明度为0 */
  }
  to {
    transform: translateY(0); /* 最终位置在正常位置 */
    opacity: 1; /* 最终透明度为1 */
  }
}
</style>